<template lang="pug">
  keep-alive
    kalix-table(bizKey="Imgs" title='图片管理列表' ref="kalixTable"
    v-bind:tableFields="tableFields"
    v-bind:targetURL="targetURL"
    v-bind:bizDialog="ImgsDialog"
    v-bind:btnList="ImgsBtnList"
    v-bind:toolbarBtnList="toolbarBtnList"
    bizSearch="ImgsSearch")
      template(slot="tableColumnSlot")
        el-table-column(prop="imgUrl"  label="图片" align="center")
          template(slot-scope="scope")
            <!--img(v-bind:src="scope.row.imgUrl" width="32" height="32" alt="")-->
            div(v-for="img in getArray(scope.row.imgUrl)")
              img(v-bind:src="img" width="60" height="60" alt="" style="float:left; margin-right: 8px")
            <!--img(v-else src="/static/images/default_user.png" width="32" height="32" alt="")-->
        el-table-column(prop="type"  label="类型")
        el-table-column(prop="identify" label="标识")
</template>
<!--v-bind:buttonPermissionPrefix="buttonPermissionPrefix"-->
<!--v-bind:customTableTool="callCustomTableTool"-->
<script type="text/ecmascript-6">
  import {ImgsURL, ImgsBtnPermissionPrefix} from '../config.toml'
  import {ImgsConfigBtnList} from './config'
  import KalixTable from '../../../../components/corelib/components/common/baseTable'
  import KalixImgUpload from '../../../../components/corelib/components/common/imgUpload'

  export default {
    name: 'kalix-training-imgslist',
    components: {KalixImgUpload, KalixTable},
    data() {
      return {
        targetURL: ImgsURL,
        tableFields: [
          {prop: 'imgUrl', label: '图片'},
          {prop: 'type', label: '类型'},
          {prop: 'identify', label: '标识'}
        ],
        ImgsDialog: [
          {id: 'add', dialog: 'ImgsAdd'},
          {id: 'edit', dialog: 'ImgsEdit'},
          {id: 'delete', dialog: 'ImgsDelete'}
        ],
        ImgsBtnList: ImgsConfigBtnList,
        toolbarBtnList: [
          {id: 'add', isShow: true, title: '添加', icon: 'icon-pinleizengjia', isPermission: true}
        ],
        buttonPermissionPrefix: ImgsBtnPermissionPrefix
      }
    },
    methods: {
      getArray(val) {
        return val.split(',')
      }
      // callCustomTableTool(row, btnId, that) {
      //   switch (btnId) {
      //     case 'editImg': {
      //       that.whichBizDialog = ''
      //       let dig =
      //         that.bizDialog.filter((item) => {
      //           return item.id === 'editImg'
      //         })
      //       that.whichBizDialog = dig[0].dialog
      //       console.log('row.imgUrl---------------', row.imgUrl)
      //       row.imgs = []
      //       if (row.imgUrl !== undefined && row.imgUrl !== null) {
      //         if (row.imgUrl.indexOf(',') !== -1) {
      //           let arr = row.imgUrl.split(',')
      //           for (let i = 0; i < arr.length; i++) {
      //             let imgObj = {}
      //             imgObj.val = arr[i]
      //             imgObj.key = 'img' + i
      //             row.imgs.push(imgObj)
      //           }
      //           this.loading = false
      //           that.$refs.kalixDialog.$refs.kalixBizDialog.open('编辑', false, row)
      //         } else {
      //           let imgObj = {}
      //           imgObj.val = row.photo
      //           imgObj.key = 'img' + 1
      //           row.imgs.push(imgObj)
      //           console.log('this.imgs--------------:', row.imgs)
      //         }
      //       }
      //       break
      //     }
      //   }
      // }
    }
  }
</script>

<style scoped lang="stylus">

</style>
<style lang="stylus">
  .el-form .el-input
    width 100%
</style>
